import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Tabs, Modal, Select } from 'antd';
import 'moment/locale/zh-cn';
import { SecondHeaderC } from '../../../comps';
import LimitDetailTableC from './limitDetailTable';
import accounting from 'accounting';

@Form.create()
export default class myModal extends PureComponent {
  state = {};

  componentDidMount() {}

  render() {
    const { record, timeStamp, type } = this.props;
    const dom = document.querySelector('.limitDetail .ant-modal-body');
    const scrollHeight = dom ? dom.offsetHeight - 200 : '100%';
    const formatValue = (value) => {
      if (record.pecentView) {
        return value !== null ? `${accounting.formatNumber(Number(value) * 100, 2)}%` : '--';
      } else {
        return value !== null ? value?.toFixed(2) : '--';
      }
    };
    return (
      <div>
        <p title={record.ruleDesc}>风险说明：{record.ruleDesc}</p>
        <div className='total_row'>
          <span>指标值：{formatValue(record.detailValue)}</span>
          <span>预警值：{formatValue(record.warningValue)}</span>
          <span>禁止值：{formatValue(record.prohibitValue)}</span>
          <span>剩余值：{formatValue(record.marginValue)}</span>
        </div>
        <SecondHeaderC title='明细结构' />
        <div>
          <LimitDetailTableC timeStamp={timeStamp} isRed={false} url={'limitDetailTableNewM/queryReportInfoById'} scrollHeight={scrollHeight} search={record} />
        </div>
      </div>
    );
  }
}
